<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AR中文扫描</title>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.3/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.3/dist/mindar-image-aframe.prod.js"></script>
    <!-- 引入 vConsole -->
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }
        a-scene {
            width: 100% !important;
            height: 100% !important;
        }
        #textCanvas {
            display: none;
        }
    </style>
</head>
<body>

<canvas id="textCanvas" width="600" height="150"></canvas>

<a-scene
        mindar-image="imageTargetSrc: ./models/card.mind; autoStart: true;"
        embedded
        vr-mode-ui="enabled: false"
        loading-screen="enabled: false">

    <a-assets>
        <img id="dynamic-text" src="">
    </a-assets>

    <a-camera active="true" position="0 0 0"></a-camera>

    <a-entity mindar-image-target="targetIndex: 0">
        <a-plane
                src="#dynamic-text"
                position="0 0 0"
                width="2.0"
                height="0.6"
                transparent="true"
                alpha-test="0.1"
                id="text-plane">
        </a-plane>
    </a-entity>

</a-scene>

<script>
    // 初始化 vConsole
    var vConsole = new VConsole();
    console.log('🚀 AR中文扫描启动...');
    console.log('📱 设备信息:', navigator.userAgent);

    // 检测可用字体
    function getAvailableFont() {
        console.group('🔍 字体检测');
        const testText = "欢迎光临";
        const testFonts = [
            '"STXingkai"',           // 华文行楷
            '"华文行楷"',             // 中文行楷
            '"STKaiti"',             // 华文楷体
            '"KaiTi"',               // 楷体
            '"SimKai"',              // 仿楷体
            '"FZShuTi"',             // 方正舒体
            '"FZYaoti"',             // 方正姚体
            '"LiSu"',                // 隶书
            '"YouYuan"',             // 幼圆
            '"Microsoft YaHei"',     // 微软雅黑
            '"SimHei"',              // 黑体
            'sans-serif'
        ];

        const canvas = document.getElementById('textCanvas');
        const ctx = canvas.getContext('2d');

        // 测试每种字体
        for (let font of testFonts) {
            ctx.font = `bold 40px ${font}`;
            const metrics = ctx.measureText(testText);
            console.log(`测试字体 ${font}:`, metrics.width > 0 ? '可用' : '不可用');
            if (metrics.width > 0) {
                console.log('✅ 找到可用字体:', font);
                console.groupEnd();
                return font;
            }
        }

        console.warn('⚠️ 未找到特殊字体，使用默认字体');
        console.groupEnd();
        return 'sans-serif';
    }

    // 生成黑色书法文字
    function generateTextImage(text, color = '#000000') {
        console.group('🎨 生成文字图片');
        console.log('文字内容:', text);
        console.log('文字颜色:', color);

        const canvas = document.getElementById('textCanvas');
        const ctx = canvas.getContext('2d');

        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 获取最佳可用字体
        const bestFont = getAvailableFont();
        console.log('使用的字体:', bestFont);

        // 设置文字样式
        ctx.fillStyle = color;
        ctx.font = `bold 58px ${bestFont}`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 添加立体阴影效果
        ctx.shadowColor = 'rgba(100, 100, 100, 0.6)';
        ctx.shadowBlur = 8;
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 3;

        // 绘制文字
        ctx.fillText(text, canvas.width / 2, canvas.height / 2);

        // 清除阴影，添加白色描边
        ctx.shadowColor = 'transparent';
        ctx.strokeStyle = '#FFFFFF';
        ctx.lineWidth = 2;
        ctx.strokeText(text, canvas.width / 2, canvas.height / 2);

        console.log('✅ 文字图片生成完成');
        console.groupEnd();
        return canvas.toDataURL('image/png');
    }

    const target = document.querySelector('[mindar-image-target]');
    const textPlane = document.querySelector('#text-plane');
    const dynamicText = document.querySelector('#dynamic-text');

    console.log('🔧 初始化组件...');
    console.log('目标实体:', target ? '找到' : '未找到');
    console.log('文字平面:', textPlane ? '找到' : '未找到');
    console.log('动态文字:', dynamicText ? '找到' : '未找到');

    // 初始化文字
    console.log('🖼️ 开始生成文字图片...');
    const textImageUrl = generateTextImage('欢迎光临', '#000000');
    dynamicText.src = textImageUrl;
    console.log('✅ 文字图片设置完成');

    target.addEventListener('targetFound', function() {
        console.log('🎯 识别成功！显示黑色书法文字');
        console.log('📏 文字平面位置:', textPlane.getAttribute('position'));
        console.log('📐 文字平面尺寸:', textPlane.getAttribute('width'), 'x', textPlane.getAttribute('height'));

        textPlane.setAttribute('animation', {
            property: 'scale',
            from: '0 0 0',
            to: '1 1 1',
            dur: 1200,
            easing: 'easeOutElastic'
        });
    });

    target.addEventListener('targetLost', function() {
        console.log('📵 目标丢失');
    });

    // 场景加载事件
    document.querySelector('a-scene').addEventListener('loaded', function() {
        console.log('✅ AR场景加载完成');
        console.log('🎯 可以开始扫描识别图');
    });

    // 错误处理
    window.addEventListener('error', function(e) {
        console.error('🚨 发生错误:', e.error);
        console.error('📄 错误文件:', e.filename);
        console.error('🔢 错误行号:', e.lineno);
    });

    // 资源加载事件
    dynamicText.addEventListener('load', function() {
        console.log('✅ 文字图片加载成功');
    });

    dynamicText.addEventListener('error', function() {
        console.error('❌ 文字图片加载失败');
    });

    console.log('🎉 初始化完成，等待识别...');
</script>
</body>
</html>